<template>
  <div>
    <div style="user-select: none;">

      <!-- 暂停 -->
      <play v-if="type === 'off'" class="PLAY" theme="filled" size="43" fill="#F14F3D" @click="changeStatus" />
      <!-- 播放中 -->
      <pause-one v-if="type === 'on'" class="PLAY" theme="filled" size="43" fill="#F14F3D" @click="changeStatus"/>
      <!-- 喜欢 -->
      <like class="Like" theme="outline" size="25" fill="#525A6C"/>
      <!-- <like class="Like" theme="filled" size="25" fill="#F14F3D" @click="like()"/> -->
      <!-- 左箭头 -->
      <left-one class="Left" theme="filled" size="35" fill="#525A6C" @click="left()"/>
      <!-- 右箭头 -->
      <right-one class="Right" theme="filled" size="35" fill="#525A6C" @click="right()"/>
      <!-- 单曲循环 -->
      <play-once v-if="mode === 'playOnce'" class="PlayOnce" theme="filled" size="25" fill="#525A6C" @click="change()" />

      <!-- 循环列表 -->
      <loop-once v-if="mode === 'loopOnce'" class="PlayOnce" theme="outline" size="25" fill="#525A6C" @click="change()"/>

      <!-- 随机 -->
      <shuffle-one v-if="mode === 'shuffleOne'" class="PlayOnce" theme="outline" size="22" fill="#525A6C" @click="change()"/>


      <!-- 播放进度条 -->
      <input type="range" id="PlaybackProgress" class="timeline" max="100" value="0" @change="progressChange()" />

      <div class="begin">{{ this.nowTime }}</div>
      <div class="end">{{ this.musicTotalTime }}</div>
      
      <!-- 喇叭播放状态有音 -->
      <volume-notice v-if="isVolume" class="volume-notice" theme="outline" size="18" fill="#7C828F" strokeLinecap="butt"/>
      <!-- 喇叭播放状态静音 -->
      <volume-mute v-if="!isVolume" class="volume-notice" theme="outline" size="18" fill="#7C828F" strokeLinecap="butt"/>
      <!-- 音量 -->
      <input class="voice" id="VolumeProgress" type="range"  max="100" value="20" @change="changeVolume()"/>
      <!-- 播放列表 -->
      <music-list class="list" theme="outline" size="22" fill="#7C828F" strokeLinecap="butt"   @click="changeAsideList()"/>

      <div class="geCi">词</div> 

      <!-- 图片 -->
      <div>
        <round class="round" theme="filled" size="70" fill="#212121"/>
        <img class="imgs" :src="this.musicImg" :class="{pause:ifPaused}">
      </div>

      <div>
        <div class="song">
          {{ this.songName }}
          <span class="singer">
            -{{ this.singerName }}
          </span>
      </div>

      <add class="Add" theme="outline" size="23" fill="#7C828F"/>
      <message class="Message" theme="outline" size="23" fill="#7C828F"/>
      <share-two class="ShareTwo" theme="outline" size="23" fill="#7C828F"/>
      <to-bottom class="ToBottom" theme="outline" size="23" fill="#7C828F"/>
      </div>
    </div>

  </div>
  
</template>

<script>
import TheSongAudio from '../components/SongAudio.vue'
import {Play,PauseOne ,LeftOne,RightOne,Like,PlayOnce,VolumeNotice,VolumeMute,MusicList,Round,Add,Message,ShareTwo,ToBottom,LoopOnce,ShuffleOne} from '@icon-park/vue';
import { mapGetters } from 'vuex';

export default {
  
  components: {
    TheSongAudio,
    Play,
    PauseOne,
    LeftOne,
    RightOne,
    Like,
    PlayOnce,
    VolumeNotice,
    VolumeMute,
    MusicList,
    Round,
    Add,
    Message,
    ShareTwo, 
    ToBottom,
    LoopOnce,
    ShuffleOne
  },
  computed: {
        ...mapGetters([
            'isPlay',
            'type',
            'musicTotalTime',
            'currentTime',
            'total',
            'volume',
            'musicImg',
            'singerName',
            'songName',
            'listSong',
            'musicIndex',
            'autoPlay',
            'mode'
        ]),
    },
    mounted() {  
    },
  watch:{
    isPlay(){
      if(this.isPlay){
        this.ifPaused = false
      }else{
        this.ifPaused = true
      }
    },
    currentTime(){
      this.formatSeconds(this.currentTime)
      this.changeProgress(this.currentTime,this.total)
    },
    progress(){
      this.left()
    }
  },
  created(){
    this.$store.commit('setIsPlay', false)
    this.$store.commit('setUrl', 'http://localhost:8888/Song/main.mp3')
  },
  data(){
   return{
    nowTime:'00:00',
    progress:"",
    isVolume:true,
    ifPaused: true,
    drawer: false,
   }
  },
  methods:{
    changeAsideList(){
      this.$store.commit('setOpenAsideList',true)
    },
    //改变音量
    changeVolume(){
      var range = document.getElementById("VolumeProgress");
      let value = range.value 
      let volume = value/100
      if(volume === 0){
        this.isVolume = false;
        this.$store.commit('setVolume', volume)
      }
      else{
        this.isVolume = true;
        this.$store.commit('setVolume', volume)
      }
      
    },
    progressChange(){
      var range = document.getElementById("PlaybackProgress");
      let value = range.value 
      let current = value/100*this.total
      this.$store.commit('setNewCurrentTime', current)
    },
    changeStatus(){
      if(this.type === 'off'){
        
        this.$store.commit('setType', 'on')
        this.$store.commit('setIsPlay', true)
        
      }
      else{
        
        this.$store.commit('setType', 'off')
        this.$store.commit('setIsPlay', false)
      }
    },
    formatSeconds(value){
      let timeDisplay = value
      let minute = timeDisplay / 60;
      let minutes = parseInt(minute);
      if (minutes < 10) {
        minutes = "0" + minutes;
      }
      //秒
      let second = timeDisplay % 60;
      let seconds = Math.round(second);
      if (seconds < 10) {
          seconds = "0" + seconds;
      }
      let time = minutes +':'+seconds
      this.nowTime = time
    },
    changeProgress(cuTime,total){
      let value = (cuTime/total) * 100
      // console.log('当前时间'+ cuTime)
      // console.log('总时间'+ total)
      var range = document.getElementById("PlaybackProgress");
      // 动态设置value属性
      range.value = value;
    },
    like(){
      alert('like')
    }
    ,
    //下一首
    right(){
        if(this.musicIndex != -1 && this.listSong.length > 1){
          
          if(this.musicIndex  === this.listSong.length - 1){
            this.$store.commit('setUrl', this.listSong[0].url)
            this.$store.commit('setIsPlay', true)
            this.$store.commit('setType', 'on')
            this.$store.commit('setMusicTotalTime',this.listSong[0].musictotaltime)
            this.$store.commit('setMusicImg',this.listSong[0].musicImg)
            this.$store.commit('setSingerName',this.listSong[0].singerName)
            this.$store.commit('setSongName',this.listSong[0].songName)
            this.$store.commit('setMusicIndex',0)
          }else{
            this.$store.commit('setUrl', this.listSong[this.musicIndex+1].url)
            this.$store.commit('setIsPlay', true)
            this.$store.commit('setType', 'on')
            this.$store.commit('setMusicTotalTime',this.listSong[this.musicIndex+1].musictotaltime)
            this.$store.commit('setMusicImg',this.listSong[this.musicIndex+1].musicImg)
            this.$store.commit('setSingerName',this.listSong[this.musicIndex+1].singerName)
            this.$store.commit('setSongName',this.listSong[this.musicIndex+1].songName)
            this.$store.commit('setMusicIndex',this.musicIndex+1)
          }
          
        } 
        

    }
    ,
    left(){
      if(this.musicIndex != -1 && this.listSong.length > 1){
          
          if(this.musicIndex  === 0){
            this.$store.commit('setUrl', this.listSong[this.listSong.length-1].url)
            this.$store.commit('setIsPlay', true)
            this.$store.commit('setType', 'on')
            this.$store.commit('setMusicTotalTime',this.listSong[this.listSong.length-1].musictotaltime)
            this.$store.commit('setMusicImg',this.listSong[this.listSong.length-1].musicImg)
            this.$store.commit('setSingerName',this.listSong[this.listSong.length-1].singerName)
            this.$store.commit('setSongName',this.listSong[this.listSong.length-1].songName)
            this.$store.commit('setMusicIndex',this.listSong.length-1)
          }else{
            this.$store.commit('setUrl', this.listSong[this.musicIndex-1].url)
            this.$store.commit('setIsPlay', true)
            this.$store.commit('setType', 'on')
            this.$store.commit('setMusicTotalTime',this.listSong[this.musicIndex-1].musictotaltime)
            this.$store.commit('setMusicImg',this.listSong[this.musicIndex-1].musicImg)
            this.$store.commit('setSingerName',this.listSong[this.musicIndex-1].singerName)
            this.$store.commit('setSongName',this.listSong[this.musicIndex-1].songName)
            this.$store.commit('setMusicIndex',this.musicIndex-1)
          }
          
        } 
    }
    ,
    change(){
      if(this.mode === 'playOnce'){
        this.$store.commit('setMode' , 'loopOnce')
      }
      else if(this.mode === 'loopOnce'){
        this.$store.commit('setMode' , 'shuffleOne')
      }
      else if(this.mode === 'shuffleOne'){
        this.$store.commit('setMode' , 'playOnce')
      }
    }
  }
}
</script>

<style scoped>
.PLAY {
  position:absolute;
  left: 0; right: 0;  
	bottom: -6px;
  cursor: pointer;
}


.Left{
  position:absolute;
  left:46%;
  bottom:-3px;
  cursor: pointer;
}
.Right{
  Right:46%;
  bottom:-3px;
  position:absolute;
  cursor: pointer;
}
.Like{
  position:absolute;
  cursor: pointer;
  bottom:2px;
  left:44%;
}
.PlayOnce{
  position:absolute;
  cursor: pointer;
  bottom:2px;
  right:44%;
}
.timeline{
  position:absolute;
  bottom:8px;
  left:37%;
}
.timeline {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 500px;
}
.timeline::-webkit-slider-runnable-track {
    height: 4px;
    background: #eee;
}
.timeline::-webkit-slider-container {
    height: 20px;
    overflow: hidden;
}
.timeline::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #f44336;
    border: 1px solid transparent;
    margin-top: -3px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 3 10 3 0 / 0px 0px 0 2000px;
}
.begin{
  position:absolute;
  bottom:-23px;
  left:35%;
  color: #DADCDF;
  font-size: 12px;
}
.end{
  position:absolute;
  bottom:-23px;
  right:35%;
  color: #DADCDF;
  font-size: 12px;
}
.voice{
  position:absolute;
  bottom:30px;
  right:1%;
}
.voice{
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100px;
}
.voice::-webkit-slider-runnable-track {
    height: 4px;
    background: #eee;
}
.voice::-webkit-slider-container {
    height: 20px;
    overflow: hidden;
}
.voice::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #B6BAC0;
    border: 1px solid transparent;
    margin-top: -3px;
    border-image: linear-gradient(#B6BAC0,#B6BAC0) 0 fill / 3 10 3 0 / 0px 0px 0 2000px;
}
.volume-notice{
  position:absolute;
  bottom:-2px;
  right:6.5%;
}
.list{
  position:absolute;
  bottom:-4px;
  right:8.5%;
  cursor:pointer;
}
.geCi{
  position:absolute;
  bottom:-1px;
  right:10.5%;
  color: #7C828F;
  font-size: 22px;
  font-weight: 530;
}
.round{
  position:absolute;
  bottom:-27px;
  left: 2%;
  z-index: 1;
}
.imgs{
  position:absolute;
  height: 47px;
  left: 2.58%;
  bottom: 16px;
  border-radius: 50%;
  z-index: 100;
}
.imgs{
	    animation: musicImage 30s linear infinite;
	}
@keyframes musicImage{
	    from{
	        transform: rotate(0deg);
	    }
	    to{
	        transform: rotate(360deg);
	    } 
}
.pause{
  animation-play-state: paused;
}

.song{
  position:absolute;
  color: #555D6E;
  left: 6%;
  bottom: 10px;
  font-size: 16px;
}
.singer{
  font-size: 14px;
}
.Add{
  position:absolute;
  left: 5.9%;
  bottom: -22px;
}
.Message{
  position:absolute;
  left: 7.9%;
  bottom: -22px;
}
.ShareTwo{
  position:absolute;
  left: 9.9%;
  bottom: -22px;
}
.ToBottom{
  position:absolute;
  left: 11.9%;
  bottom: -22px;
}

</style>